<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>见微-全媒体记者发稿助手</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <link href="__PUBLIC__/live/css/base.css" rel="stylesheet">
    <link href="__PUBLIC__/live/css/column-list-flow.css" rel="stylesheet">

    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <style type="text/css">
        .nav-tab a { color: #337ab7 !important; }
    </style>
</head>

<body>

<include file="Public:header" />
<ul class="breadcrumb">
    <li>
        <a href="/Live">主页</a>
    </li>
    <li class="active">
        <span>专题列表</span>
    </li>
</ul>
<div class="clearfix"></div>
<div class="main-content">
    <div class="wrap">
        <div class="btns text-right" id="btnlist">
            <button class="btn btn-info" type="button" id="cancelSort">重置</button>
            <button class="btn btn-default" type="button" id="sureSort">保存排序</button>
        </div>
        <ul class="video-list">
            <?php foreach($themeList as $key => $val) { ?>
            <li class="list-item <?php if($val['status']){echo "sort-item";}else{echo "hide-item";} ?>" data-id="{$val['id']}">
                <div class="dropdown setting-box">
                    <button class="btn btn-info btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-cog"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a href="{:U('themeSetting')}?id={$val['id']}">设置</a></li>
                        <li><a href="javascript:void(0)" class="delTheme" data-id="{$val['id']}">删除</a></li>
                    </ul>
                </div>
                <a href="{:U('themeInfo',array('cid'=>$val['id']));}">
                    <div class="img" style="background-image:url('{$val['image_url']|default='http://image.dev.appwuhan.net/defaultpic.gif'}?imageView2/2/w/218/h/129');"></div>
                    <h2 class="title text-center">{$val['name']}</h2>
                </a>
            </li>
            <?php } ?>
            <li class="list-item add-column" title="添加新主题">
                <a href="{:U('addNewTheme')}"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i></a>

            </li>
        </ul>
        <ul class="listbakup"></ul>
    </div>
</div>

<div id="mask"></div>
<div id="working">
    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">保存中...</span>
</div>

<div id="dialog-message" title="">
</div>
<script>
    $(".video-list").clone().appendTo(".listbakup");
    $(".video-list li").hover(function(){
        $(this).find('.setting-box').stop(true,true).show('200');
    },function(){
        $(this).find('.setting-box').stop(true,true).hide('200');
    })
    /*$( ".video-list" ).sortable({
        opacity:0.6,
        items: "> .sort-item",
        stop: function( event, ui ) {
            var _this=this;
            $("#btnlist").show();
        }
    });
    $( ".video-list" ).disableSelection();*/
    $( "#dialog-message" ).on('close',function(){
        $( "#dialog-message" ).empty();
        $( "#dialog-message" ).destory();
    })

    $("#cancelSort").click(function(){
        $( "#dialog-message" ).html('<p style="font-size: 20px;padding:0 10px;"><i class="fa fa-info-circle" aria-hidden="true"></i> 是否放弃此次排序的结果？</p>')
        $( "#dialog-message" ).dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                '我要放弃，并重置排序': function () {
                    $(this).dialog("close");
                    $( ".video-list" ).html($(".listbakup").html()).sortable( "refresh" );
                    $("#btnlist").hide();
                },
                "不放弃，我要继续修改": function () {
                    $(this).dialog("close");
                },

            }
        })
    })

    $("#sureSort").click(function(){
        $( "#dialog-message" ).html('<p style="font-size: 20px;padding:0 10px;"><i class="fa fa-info-circle" aria-hidden="true"></i> 是否保存此次排序的结果？</p>')
        $( "#dialog-message" ).dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "取消，不保存": function() {
                    $( this ).dialog( "close" );
                },
                '确定，我要保存': function() {
                    $( this ).dialog( "close" );
                    var ids =$( ".video-list" ).sortable( "toArray",{attribute :'data-id'}).join(',');

                    if(ids!=""){
                        $( ".video-list" ).sortable('disable');
                        $("#mask,#working").show();
                        $.ajax({
                            url:"{:U('updateColumnSort')}",
                            async:false,
                            dataType:'json',
                            type:'post',
                            data:{ids:ids},
                            success:function(data){
                                if(data.resultCode===0){
                                    $("#btnlist").hide();
                                    $( ".listbakup" ).html($(".video-list").html())
                                }else{
                                    $( "#dialog-message" ).html('<p style="font-size: 20px;padding:0 10px;"><i class="fa fa-info-circle" aria-hidden="true"></i> '+data.info+'</p>')
                                    $( "#dialog-message" ).dialog({
                                        modal: true,
                                        buttons: {
                                            "确定": function() {
                                                $( this ).dialog( "close" );
                                            }
                                        }
                                    });
                                }

                            },
                            complete:function(){
                                $("#mask,#working").hide();
                                $( ".video-list" ).sortable('enable');
                            }
                        })
                    }
                }
            }
        });
    })

    $(".delTheme").click(function(){
        var _this=this;
        $( "#dialog-message" ).html('<p style="font-size: 20px;padding:0 10px;"><i class="fa fa-info-circle" aria-hidden="true"></i>是否确定删除 <strong>《'+$( _this ).parents('.sort-item').find('.title').text()+'》</strong> 专题？</p>').dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "取消，不删除": function() {
                    $( this ).dialog( "close" );
                },
                '确定，我要删除': function() {
                    $( this ).dialog( "close" );
                    var id =$( _this ).data('id');

                    if(id!=""){
                        $.ajax({
                            url:"{:U('delTheme')}",
                            async:false,
                            dataType:'json',
                            data:{id:id},
                            success:function(data){
                                $( "#dialog-message" ).html('<p style="font-size: 20px;padding:0 10px;"><i class="fa fa-info-circle" aria-hidden="true"></i> '+data.info+'</p>').dialog({
                                    modal: true,
                                    buttons: {
                                        "确定": function() {
                                            $( this ).dialog( "close" );
                                            if(data.resultCode===0){
                                                $( _this ).parents('.sort-item').remove();
                                                $(".listbakup").empty().append($(".video-list").clone());
                                            }
                                        }
                                    }
                                });
                            }
                        })
                    }
                }
            }
        });
    })
</script>
</body>

</html>